<template>
 <div class="container">
     <div class="ptitle">
        <h4>{{msg.title}}</h4>
        <p>{{msg.add_time | datefmt("YYYY-MM-DD HH:mm:ss")}} <span>{{msg.click}}</span>次浏览</p>
        <div class="line"></div>
     </div>
     <div class="ul">
         <ul>
            <li v-for="(item, index) in thumb">
                <img class="preview-img"  :src="item.src" height="100" @click="$preview.open(index, thumb)">
            </li>
        </ul>
     </div>
     
     <div class="pcontent" v-html="msg.content"></div>
     <comment :id="id"></comment>
 </div>
</template>

<script>
import { Toast } from 'mint-ui';
import comment from '../subcom/comment.vue';//导入评论组件
 export default {
     components:{
         comment
     },
   data () {
     return {
         id:0,
         msg:[],
         thumb:[]
     }
   },
   created(){
       this.id=this.$route.params.cateId;
        this.imgInfo(this.id);
        this.imgThumb(this.id);
   },
   methods:{
       imgInfo(cateId){
           var url="api/getimageInfo/"+cateId;
           this.$http.get(url).then(function(res){
               if(res.body.status!=0){
                   Toast(res.body.message);
                   return;
               };
                this.msg=res.body.message[0];
                // console.log(this.msg);
           })
       },
       imgThumb(imgId){
           var url="api/getthumimages/"+imgId;
           this.$http.get(url).then(function(res){
               if(res.body.status!=0){
                   Toast(res.body.message);
                   return;
               }
            //    this.thumb=res.body.message;
               res.body.message.forEach(function(item){
                    var img=document.createElement('img');
                    img.src=item.src;
                    img.onload=function(){
                    item.h=img.height;
                    item.w=img.width;
                    }
                    
               });
               this.thumb=res.body.message;
            //    console.log(this.thumb);
           });
       }
   }
 }
</script>

<style scoped>

.container {
    padding:5px;
}
.ptitle h4 {
    color: #0094ff;
}
.ul ul {
    list-style:none;
    margin: 0;
    padding: 0;
    overflow:hidden;
    text-align:center;
    width:375px;
    margin:0 auto;
}
.ul ul li {
    float:left;
    width:32%;
    margin-bottom:10px;
}

.ptitle p {
    color:#ccc;
}
.ptitle .line {
    height:1px;
    background-color: #ccc;
    margin-bottom:10px;
}
.pcontent {
    color:#222;
    margin-bottom:20px;
}
 
</style>
